<template>
    <view-box style="background:#F3F6F7">
        <div style="height:10px;"></div>
         <div class="backg-sume">
            <div class="Myresu-mian">
                <div class="po-sume-ba">
                    <div class="pos-img-sum">
                        <div class="" >
                            <img style="width:66px;height:66px;margin-top: 10px;border-radius: 100%;" v-if="addBasic.user" :src="addBasic.user.avatar" alt="">
                            <div class="pos-my-pae" style="top:50px;" v-if="addBasic.sex === 2">
                                <i slot="icon"  class="iconfont icon-baina_nv"></i>
                            </div>
                            <div class="pos-my-pae" style="top:50px;background:#32B6C6;" v-if="addBasic.sex === 1">
                                <i slot="icon"  class="iconfont icon-baina_nan"></i>
                            </div>
                        </div>
                    </div>
                    <div class="pos-text-sum">
                        <p style="font-size:15px;width:100%" v-if="addBasic.user">{{addBasic.user.name}}</p>
                        <p style="font-size:15px;color:#32B6C6;width:100%;" v-if="addBasic.basic">{{addBasic.basic.company}}</p>
                    </div>
                </div>
                <div class="width-border"></div>
                <div class="post-right-bc">
                  <p style="margin-top:10px;" v-if="addBasic.basic">{{birth - addBasic.basic.birth}}岁</p>
                  <p v-if="addBasic.basic">{{addBasic.basic.start_work_time}}年工作经验</p>
                  <p v-if="addBasic.basic">{{addBasic.basic.province}}{{addBasic.basic.city}}{{addBasic.basic.area}}</p>
                </div>
            </div>
            <div class="wid-sume">
              <p style="font-size:14px;color:#bababa;">座右铭：{{addBasic.motto}}</p>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-back-preview" v-if="addBasic.basic !== null">
            <div class="border-prou">
                <h4>基本信息</h4>
            </div>
            <p class="padding-lefts">
                <span class="color-sposi">真实姓名:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span  v-if="addBasic.basic">{{addBasic.basic.true_name}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">出生日期:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.birth}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">当前城市:</span>
                <span v-if="addBasic.basic">{{addBasic.basic.city}}-{{addBasic.basic.area}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">开始工作:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.start_work_time}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">手机号:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.mobile}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">电子邮箱:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.mailbox}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">当前公司:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.company}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">当前职位:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.position}}</span>
            </p>
            <!-- <p class="padding-lefts">
                <span>当前行业</span>
                <span>{{addBasic.basic.true_name}}</span>
            </p>
            <p class="padding-lefts">
                <span>当前职能</span>
                <span>{{addBasic.basic.true_name}}</span>
            </p> -->
            <p class="padding-lefts">
                <span class="color-sposi">当前状态:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic">{{addBasic.basic.now_status}}</span>
            </p>
        </div>
        <div style="height:6px"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>工作经历</h4>
            </div>
          <div class="border-bottom-pre" v-for="(item, index) in addBasic.work" :key="index">
            <p class="padding-lefts">
                <span>{{item.job_title}}</span>
                <span style="font-size:13px;color:#bababa;">{{item.company}}</span>
            </p>
             <p class="padding-lefts">
                <span style="font-size:13px;color:#bababa;">{{item.start_time}}</span>-
                <span style="font-size:13px;color:#bababa;">{{item.over_time}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">公司行业:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.industry}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">职能业绩:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.performance}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">汇报对象:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.report}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">下属人数:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.subordinate_number}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">年　薪:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.nianxin}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">公司性质:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.nature}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">公司规模:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.scale}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">所在部门:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.department}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">公司介绍:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.company_introduction}}</span>
            </p>
          </div>
        </div>
        <div style="height:6px"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>教育经历</h4>
            </div>
          <div class="border-bottom-pre" v-for="(item, index) in addBasic.education" :key="index">
            <p class="padding-lefts">
                <span>{{item.start_time}}</span>-
                <span>{{item.over_time}}</span>
                <span>{{item.school_name}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">专　业:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.education}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">学　历:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.major}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">统　招:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="item.is_unified === 0">否</span>
                <span v-if="item.is_unified === 1">是</span>
            </p>
          </div>
        </div>
        <div style="height:6px"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>职业意向</h4>
            </div>
          <div class="border-bottom-pre" v-if="addBasic.intention !== null">
             <p class="padding-lefts">
                <span class="color-sposi">期望行业:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.intention">{{addBasic.intention.desired_industry}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">期望职能:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.intention">{{addBasic.intention.desired_career}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">期望地点:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.intention">{{addBasic.intention.city}}-{{addBasic.intention.area}}</span>
            </p>
            <p class="padding-lefts">
                <span class="color-sposi">期望年薪:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.intention">{{addBasic.intention.desired_annual_salary}}</span>
            </p>
            <p class="padding-lefts" v-if="addBasic.basic">
                <span class="color-sposi">目前年薪:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.basic.is_look_annual_salary === 1">{{addBasic.basic.annual_salary}}</span>
                <span v-if="addBasic.basic.is_look_annual_salary === 0">保密</span>
            </p>
          </div>
        </div>
         <div style="height:6px"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>语言能力</h4>
            </div>
          <div class="border-bottom-pre" v-if="addBasic.languag !==null">
             <p class="padding-lefts">
                <span class="color-sposi">语言能力:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span v-if="addBasic.language">{{addBasic.language.language}}</span>
            </p>
          </div>
        </div>
         <div style="height:6px"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>项目经验</h4>
            </div>
          <div class="border-bottom-pre" v-for="(item, index) in addBasic.project" :key="index">
            <p class="padding-lefts">
                <span>{{item.project_name}}</span>
                <span>{{item.start_time}}</span>-
                <span>{{item.over_time}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">项目职务:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.duty}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">所在公司:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.corporation}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">项目描述:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.project_description}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">项目职责:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.project_role}}</span>
            </p>
             <p class="padding-lefts">
                <span class="color-sposi">项目业绩:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{item.project_performance}}</span>
            </p>
          </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-back-preview">
          <group style="padding:5px;" v-if="addBasic.xinlixue !== null">
            <cell-box style="position: relative;font-size:16px;" @click.native="$router.push('/assessment?idoui=' + addBasic.xinlixue.id)" is-link>
                易经评估
            </cell-box>
        </group>
          <group style="padding:5px;"  v-if="addBasic.yijing !== null">
            <cell-box style="position: relative;font-size:16px;" @click.native="$router.push('/assessment?idoui=' + addBasic.yijing.id)" is-link>
                心理评估
            </cell-box>
        </group>
        </div>
        <div style="height:10px;"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>个人形象照片</h4>
            </div>
            <div class="img-qyfc" v-if="addBasic.flaunt">
              <div class="width-up-images" v-for="(item, index) in addBasic.flaunt.image" :key="index">
                <img  class="imga-imgses" :src="$apiUrl + '/storage/' + item" alt="">
              </div>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="border-back-preview">
            <div class="border-prou">
                <h4>个人形象视频</h4>
            </div>
            <div class="pooswid-dio-qbu" v-if="addBasic.flaunt">
                <video v-if="addBasic.flaunt.video !== null" :src="$apiUrl + addBasic.flaunt.video"  width="100%" height="240" controls="controls">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        <div class="bottom-posty">
            <!-- <button>立即沟通</button> -->
             <button class="previ-left-buttom-c" style="color:#bababa;" v-if="addBasic.is_follow !== 0">
                 <i slot="icon" class="iconfont icon-dianjiquxiaoguanzhu"></i> 已关注
            </button>
             <button @click="follow(addBasic.user_id)" class="previ-left-buttom-c" v-if="addBasic.is_follow === 0">
                 <i slot="icon" class="iconfont icon-dianjiguanzhu"></i> 关注
            </button>
            <button  class="previ-buttom-follw" v-if="addBasic.is_invite !== 0">已邀请</button>
             <button  class="previ-buttom-c" @click="yaoqing(addBasic.user_id)" v-if="addBasic.is_invite === 0">邀请面试</button>
        </div>
    </view-box>
</template>
<script>
import { ViewBox, Box, XInput, Group, XButton, Datetime, PopupPicker, CheckIcon, CellBox } from 'vux'
export default {
  name: 'Addresume',
  components: {
    ViewBox,
    Box,
    XInput,
    Group,
    XButton,
    Datetime,
    PopupPicker,
    CheckIcon,
    CellBox
  },
  data () {
    return {
      radio001: ['是否统招'],
      value4: '',
      value3: '',
      value6: [['博士后', '博士', 'MBA/EMBA', '硕士', '本科', '大专', '中专', '中技', '高中', '初中']],
      is_unified: false,
      pid: '',
      tabldata: {
        id: '',
        school_name: '',
        major: '',
        education: '',
        is_unified: '',
        start_time: '',
        over_time: ''
      },
      addBasic: {},
      addiss: {},
      data: [],
      addResume: {}
    }
  },
  computed: {
    birth: function () {
      let mydate = new Date()
      let newdate = mydate.getFullYear()
      console.log(newdate)
      return newdate
    },
    disabled () {
      console.log('zunhh')
    },
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  mounted () {
    this._getresume()
    if (!this.$store.state.auth.userInfo) {
      this.$store.dispatch('getUserInfo')
    }
  },
  methods: {
    change () {
      console.log('zhou')
    },
    _getresume () {
      this.$http.get('/lookOthersInfo/?uid=' + this.$route.query.id + '&&identity=' + '1' + '&&is_pinggu=' + this.$route.query.ispg).then(response => {
        this.addBasic = response.data.info
        // console.log(this.addressValue)
      }).catch(error => {
        console.log(error)
      })
    },
    follow (id) {
      this.$http.post('/follow', {
        by_id: id
      }).then(response => {
        this.$vux.toast.show({
          text: '关注成功',
          type: 'text'
        })
        this._getresume()
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    yaoqing (id) {
      this.$http.post('/yaoqing', {
        by_id: id
      }).then(response => {
        this.$vux.toast.show({
          text: '邀请成功',
          type: 'text'
        })
        this._getresume()
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
    .btn-set-default {
        flex: 1;
        line-height: 50px;
    }
    .border-back-preview{
        background: #fff;
        width: 92%;
        margin-left: 4%;
        border-radius: 7px;
    }
    .border-prou{
        width: 92%;
        height: 50px;
        border-bottom: 1px solid #f4f4f4;
        margin-left: 4%;
        line-height: 50px;
    }
    .padding-lefts {
        width: 92%;
        margin-left: 4%;
        border-bottom: 1px solid #f4f4f4;
        line-height: 40px;
        
    }
    .border-bottom-pre{
        width: 92%;
        height: auto;
        border-bottom: 1px solid #f4f4f4;
        margin-left: 4%;
    }
    .img-qyfc{
        width: 100%;
        margin-left: 0%;
        display: flex;
        flex-wrap: wrap;
    }
    .width-up-images{
    width: 18%;
    margin-left: 2%;
    margin-top: 10px;
    position: relative;
    }
    .imga-imgses{
    width: 100%;
    border-radius: 8px;
    }
    .pooswid-dio-qbu{
    width: 100%;
    margin-top: 10px;
}
.pooswid-dio-qbu img{
    width: 100%;
    border-radius: 8px;
    height: auto;
}
.bottom-posty{
    width: 100%;
    height: 50px;
    position: fixed;
    background: #fff;
    bottom: 0px;
    left: 0px;
}
.previ-left-buttom-c{
    width: 40%;
    height: 40px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0px;
    color: #32B6C6;
    margin-top: 5px;
    font-size: 16px;
    float: left;
}
.previ-buttom-c{
    width: 30%;
    height: 40px;
    margin-right: 10%;
    background: #32B6C6;
    border: 1px solid #32B6C6;
    border-radius: 16px;
    color: #fff;
    float: right;
    margin-top: 5px;
}
.previ-buttom-follw{
    width: 30%;
    height: 40px;
    margin-right: 10%;
    background: #bababa;
    border: 1px solid #bababa;
    border-radius: 16px;
    color: #fff;
    float: right;
    margin-top: 5px;
}
.backg-sume{
      width: 92%;
      margin-left: 4%;
      background: #fff;
      border-radius: 7px;
}
 .Myresu-mian{
        width: 92%;
        margin-left: 4%;
        display: flex;
        border-bottom: 1px solid #E6E6E6;
     }
     .po-sume-ba{
width: 60%;
display: flex;
}
.pos-img-sum{
    width: 65px;
    position: relative;
}
  .pos-my-pae{
        position: absolute;
        height: 25px;
        width: 25px;
        background: #F8849C;
        border-radius: 100%;
        line-height: 25px;
        text-align: center;
        color: #fff;
        top: 45px;
        right: -5px;
    }
    .pos-text-sum{
    width: 75%;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 10px;
}
.post-right-bc{
    width:38%;
    font-size: 13px;
    color: #BABABA;
}
.wid-sume{
    width: 92%;
    margin-left: 4%;
    padding:5px 0px;
}
.width-border{
    width: 1px;
    height: 80px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 10px;
    background: #f4f4f4;
}
.color-sposi{
    font-size: 15px;
    color: #bababa;
}
</style>
<style>
 .weui-cells:before{
        border-top: 0px solid #D9D9D9 !important;
    }
    .weui-cells:after{
        border-bottom: 0px solid #D9D9D9 !important;
    }
    .border-back-preview .vux-no-group-title {
    margin-top: 0 !important;
}
    .vux-label{
        font-size: 14px !important;
    }
    .weui-cell__ft{
        font-size: 14px;
    }
    .weui-cell_access{font-size: 14px;}
      .weui-cells:before {
    border-top: 0px solid #D9D9D9!important;
}
.weui-cells:after {
    border-bottom: 0px solid #D9D9D9!important;
}
.weui-cell:before {
    border-top: 0px solid #D9D9D9!important;
}
</style>